<template>
    <section style="padding-bottom: 90px;">
        <DetailsHeader title="工单详情" class="mb-24" />
        <div class="page-card">
            <div class="work-detail flex">
                <div class="head-sculpture">
                    <img :src="userInfo?.userItem?.avatar || defaultAvatar" alt="">
                </div>
                <div class="detail-content">
                    <div class="order-title">【{{ orderItem.category }}】</div>
                    <div class="order-desc">{{ orderItem.context }}</div>
                    <div class="order-content" v-if="imgList.length">
                        <div v-for="item in imgList" class="img-list" v-show="item">
                            <a-image :width="88" v-if="item" :src="item" />
                        </div>
                    </div>
                    <div class="order-date">{{ orderItem.createdAt }}</div>
                </div>
            </div>
            <a-divider />
            <div class="chat-list flex mb-8" v-for="item in chatList">
                <div class="head-sculpture">
                    <img src="@/assets/img/console/work-order-header.png" alt="" v-if="item.admin_id > 0">
                    <img v-else :src="userInfo?.userItem?.avatar || defaultAvatar" alt="">
                </div>
                <div class="chat-content">
                    <div class="order-date mb-16">{{ item.created_at }}</div>
                    <div class="order-content t-editor" v-html="item.content"></div>
                </div>
            </div>

        </div>

        <div class="page-card" v-if="orderItem.status != 2">
            <a-form :label-col="{
                style: {
                    width: '150px',
                }
            }" :model="form" ref="formRef">
                <div class="card-content">
                    <a-row :gutter="24">
                        <a-col :span="24" style="padding: 24px;">
                            <TEditor ref="editor" v-model="form.content" @getContent="getContent"></TEditor>
                        </a-col>
                    </a-row>
                </div>
            </a-form>

            <div style="margin-top: 24px;">
                <a-button type="primary" @click="nextStep"
                    style="display:flex;align-item:center;margin-left: auto;">回复</a-button>
            </div>
        </div>

    </section>
</template>

<script setup>
import DetailsHeader from '@/components/common/DetailsHeader.vue'
import { reactive, ref } from 'vue'
import { ZyNotification, XsyMessage } from '@/libs/util.toast'
import { useRouter, useRoute, routerKey } from 'vue-router'
import TEditor from '@/components/common/TEditor.vue';
import { replyWorkOrder, getWorkOrderDetailsApi } from 'api/modules/api.workOrder'
import { storeToRefs } from 'pinia'
import userInfoStore from '@/stores/userInfo.js'
import defaultAvatar from '@/assets/img/avatar.png'
const useUserInfoStore = userInfoStore()
const { userInfo } = storeToRefs(useUserInfoStore);

const route = useRoute();
const id = route.query.id

const form = ref({})
const nextStep = () => {
    if (!form.value.content) {
        XsyMessage.error('回复内容不能为空！')
        return
    } else if (form.value.content.length > 1000) {

        XsyMessage.error('回复内容不能超过1000字！')
        return
    }

    const params = {
        ...form.value,
        orderId: id
    }
    replyWorkOrder(params).then(res => {
        if (res.code == 0) {
            ZyNotification.success(res.message || '回复成功')
            form.value.content = ''
            getWorkOrderDetails()
        }
    })

}

// 获取富文本内容
const getContent = (v) => {
    form.value.content = v
}

// 获取工单详情
const orderItem = ref({})
const chatList = ref([])
const imgList = ref([])
const getWorkOrderDetails = () => {
    getWorkOrderDetailsApi(id).then(res => {
        chatList.value = res.data.replyInfo || []
        orderItem.value = res.data.question || {}
        imgList.value = (res.data?.question?.extra?.screenshot).split(',') || []
    })
}

id && getWorkOrderDetails()

</script>

<style scoped lang="less">
.page-card {
    padding: 24px;
    background: #ffffff;
    box-shadow: 0px 4px 4px 0px #E7EDF8;
    margin-bottom: 24px;

    .detail-content {
        .order-title {
            color: #223354;
            font-family: PingFang SC;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            margin-bottom: 8px;
        }

        .order-desc {
            color: #646F87;
            font-family: PingFang SC;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            margin-bottom: 16px;
        }

        .order-content {
            display: flex;

            .img-list {
                margin-right: 8px;
                margin-bottom: 8px;
                width: 104px;
                height: 104px;
                flex-shrink: 0;
                background: #FFF;
                border-radius: 4px;
                border: 1px solid rgba(0, 0, 0, 0.15);
                display: flex;
                align-items: center;
                justify-content: center;

                img {
                    width: 88px;
                    height: 88px;
                }
            }
        }
    }

    .head-sculpture {
        margin-right: 16px;

        img {
            width: 36px;
            height: 36px;
        }
    }

    .order-date {
        color: #8A93A7;
        font-family: PingFang SC;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }
}

.avatar-uploader>.ant-upload {
    width: 128px;
    height: 128px;
}

.ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
}
</style>


<style scoped>
:deep(.t-editor img) {
    margin-right: 8px;
    margin-bottom: 8px;
    width: 104px;
    height: 104px;
    flex-shrink: 0;
    background: #FFF;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>